<template>
    <div class="canvas-status" v-if="visible">
        <div class="status-item">
            <span class="label">画布大小:</span>
            <span class="value">{{ canvasInfo.width }} × {{ canvasInfo.height }}</span>
        </div>
        <div class="status-item">
            <span class="label">缩放比例:</span>
            <span class="value">{{ canvasInfo.zoom }}x</span>
        </div>
        <div class="status-item">
            <span class="label">视口位置:</span>
            <span class="value">({{ canvasInfo.viewportLeft }}, {{ canvasInfo.viewportTop }})</span>
        </div>
    </div>
</template>

<script setup>
defineProps({
    canvasInfo: {
        type: Object,
        default: () => ({})
    },
    visible: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped>
.canvas-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px 12px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    display: flex;
    gap: 16px;
    z-index: 1000;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
</style>